<template>
	<view>
		<up-navbar leftIconColor="#FFFFFF" leftIconSize="44rpx" title="抽奖记录" :autoBack="true" placeholder
			bgColor="transparent">
		</up-navbar>
		<view class="record_main">
			<up-empty v-if="response.list.length === 0" textColor='#fff' iconColor="#fff" mode="list"
				icon="http://cdn.uviewui.com/uview/empty/list.png">
			</up-empty>
			<view class="record_main-item" v-for="item in response.list" :key="item.id">
				<up-gap height="30rpx"></up-gap>
				<recordingDataVue :item="item" :type='2' />
				<up-gap height="30rpx"></up-gap>
				<view class="record_main-item-line"></view>
			</view>
		</view>
		<up-back-top :scrollTop="scrollTop" :iconStyle="iconStyle" :duration="200" :bottom="160"></up-back-top>
	</view>
</template>

<script setup>
	import recordingDataVue from '../components/recordingData.vue';
	import secondApi from "@/api/biz/second.js"
	import {
		reactive,
		ref
	} from "vue"
	import {
		onLoad,
		onShow,
		onPageScroll,
		onReachBottom
	} from "@dcloudio/uni-app"
	const iconStyle = {
		fontSize: '32rpx',
		color: '#2979ff'
	};
	const scrollTop = ref(0);

	onPageScroll((e) => {
		scrollTop.value = e.scrollTop;
	})

	onReachBottom(() => {
		if (response.list.length >= response.total) return;
		queryParams.pageNo++;
		getList()
	})

	const queryParams = reactive({
		pageNo: 1,
		pageSize: 30
	})

	const response = reactive({
		list: [],
		total: 0
	})

	const getList = () => {
		secondApi.getUserLotteryRecordPage(queryParams).then(res => {
			response.list = res.data.list;
			response.total = res.data.total
		})
	}


	onLoad(() => {
		getList()
	})
</script>
<style>
	page {
		background: #1B1829;
	}
</style>
<style scoped lang="scss">
	.record_main {
		padding: 46rpx 30rpx 210rpx;

		&-item {

			&-line {
				width: 690rpx;
				height: 1rpx;
				background: #FFFFFF;
				opacity: 0.2;
			}
		}
	}
</style>